<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计面板 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .navbar-brand {
            font-weight: 600;
            letter-spacing: 0.5px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,.06);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0,0,0,.1);
        }
        .card-header {
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
            font-weight: 600;
        }
        .card-footer {
            border-bottom-left-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
        }
        .dashboard-card {
            position: relative;
            overflow: hidden;
        }
        .dashboard-card::before {
            content: '';
            position: absolute;
            top: -10px;
            right: -10px;
            background: rgba(255,255,255,0.15);
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .dashboard-card .card-title {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .dashboard-card .display-4 {
            font-weight: 600;
            font-size: 2.5rem;
        }
        .dashboard-card i.card-icon {
            font-size: 3rem;
            opacity: 0.2;
            position: absolute;
            bottom: 1rem;
            right: 1rem;
        }
        .table {
            background-color: white;
        }
        .table thead th {
            border-top: none;
            background-color: #f7f7f9;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .badge {
            padding: 0.5em 0.75em;
            font-weight: 500;
        }
        footer {
            background: linear-gradient(135deg, #343a40 0%, #212529 100%);
            letter-spacing: 1px;
        }
        .animate-number {
            animation: fadeInUp 1s ease-out;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane-departure mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/statistics"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="text-dark"><i class="fas fa-tachometer-alt mr-2"></i>统计面板</h2>
            <div class="btn-group">
                <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fas fa-download mr-1"></i> 导出报表
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#" id="exportCsv">CSV格式</a>
                </div>
                <button type="button" class="btn btn-outline-primary" id="refreshData"><i class="fas fa-sync-alt mr-1"></i> 刷新数据</button>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-3">
                <div class="card dashboard-card bg-primary text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">航班总数</h5>
                        <h2 class="display-4 animate-number" th:text="${flights != null ? flights.size() : 0}">100</h2>
                        <i class="fas fa-plane card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="/flightbooking/flights">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card dashboard-card bg-success text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">旅客总数</h5>
                        <h2 class="display-4 animate-number" th:text="${passengerCount}">350</h2>
                        <i class="fas fa-users card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="/flightbooking/passengers">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card dashboard-card bg-warning text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">已售票数</h5>
                        <h2 class="display-4 animate-number" id="ticketCount">--</h2>
                        <i class="fas fa-ticket-alt card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="/flightbooking/tickets">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card dashboard-card bg-info text-white mb-4">
                    <div class="card-body">
                        <h5 class="card-title">总收入</h5>
                        <h2 class="display-4 animate-number">
                            ￥<span th:text="${#numbers.formatDecimal(totalRevenue, 0, 'COMMA', 0, 'POINT')}">125000</span>
                        </h2>
                        <i class="fas fa-yen-sign card-icon"></i>
                    </div>
                    <div class="card-footer d-flex align-items-center justify-content-between">
                        <a class="small text-white stretched-link" href="#" data-toggle="modal" data-target="#revenueDetailModal">查看详情</a>
                        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-bar mr-1"></i>
                        按航班收入统计
                    </div>
                    <div class="card-body">
                        <canvas id="revenueByFlightChart" width="100%" height="50"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-chart-line mr-1"></i>
                        近期收入趋势
                    </div>
                    <div class="card-body">
                        <canvas id="revenueTrendChart" width="100%" height="50"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-table mr-1"></i>
                        航班收入详情
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>航班号</th>
                                        <th>始发地</th>
                                        <th>目的地</th>
                                        <th>已售票数</th>
                                        <th>收入</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${flights == null || flights.isEmpty()}">
                                        <td colspan="5" class="text-center">暂无数据</td>
                                    </tr>
                                    <tr th:each="flight : ${flights}" th:if="${revenueByFlight != null && revenueByFlight.containsKey(flight.flightId)}">
                                        <td th:text="${flight.flightId}">CA1234</td>
                                        <td th:text="${flight.departureCity}">北京</td>
                                        <td th:text="${flight.arrivalCity}">上海</td>
                                        <td>--</td>
                                        <td>￥<span th:text="${#numbers.formatDecimal(revenueByFlight.get(flight.flightId), 0, 'COMMA', 0, 'POINT')}">25000</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 收入详情模态框 -->
    <div class="modal fade" id="revenueDetailModal" tabindex="-1" role="dialog" aria-labelledby="revenueDetailModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="revenueDetailModalLabel">收入详情</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="startDate">开始日期</label>
                                <input type="date" class="form-control" id="startDate">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="endDate">结束日期</label>
                                <input type="date" class="form-control" id="endDate">
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="searchRevenue">查询</button>
                    
                    <div class="mt-4">
                        <h4>时间段内总收入: <span id="periodRevenue">￥0</span></h4>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <footer class="py-4 mt-5 text-white">
        <div class="container">
            <div class="d-flex align-items-center justify-content-between small">
                <div>Copyright &copy; 航空订票系统 2023</div>
                <div>
                    <a href="#" class="text-white">隐私政策</a>
                    &middot;
                    <a href="#" class="text-white">使用条款</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 获取票数
            $.ajax({
                url: '/flightbooking/tickets/count',
                method: 'GET',
                success: function(data) {
                    $('#ticketCount').text(data);
                },
                error: function() {
                    $('#ticketCount').text('--');
                }
            });
            
            // 初始化按航班收入图表
            var revenueByFlightCtx = document.getElementById("revenueByFlightChart");
            var revenueByFlightChart;
            
            // 通过AJAX请求获取航班收入数据
            $.ajax({
                url: '/flightbooking/statistics/revenue-by-flight',
                method: 'GET',
                success: function(data) {
                    // 处理返回的数据
                    var revenueByFlight = data || {};
                    
                    // 如果Map为空，提供一些默认数据以避免图表显示错误
                    if (!revenueByFlight || Object.keys(revenueByFlight).length === 0) {
                        revenueByFlight = {'暂无数据': 0};
                    }
                    
                    var flightIds = Object.keys(revenueByFlight);
                    var revenues = flightIds.map(function(id) { return revenueByFlight[id]; });
                    
                    // 创建图表
                    revenueByFlightChart = new Chart(revenueByFlightCtx, {
                type: 'bar',
                data: {
                    labels: flightIds,
                    datasets: [{
                        label: "收入",
                        backgroundColor: "rgba(2,117,216,0.5)",
                        borderColor: "rgba(2,117,216,1)",
                        data: revenues,
                    }],
                },
                options: {
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                maxTicksLimit: 10
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                min: 0,
                                maxTicksLimit: 5,
                                callback: function(value) {
                                    return '￥' + value;
                                }
                            },
                            gridLines: {
                                display: true
                            }
                        }],
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                return '收入: ￥' + tooltipItem.yLabel;
                            }
                        }
                    }
                }
                    });
                },
                error: function(xhr, status, error) {
                    console.error('获取航班收入数据失败:', error);
                    // 创建一个空图表，显示错误信息
                    revenueByFlightChart = new Chart(revenueByFlightCtx, {
                        type: 'bar',
                        data: {
                            labels: ['暂无数据'],
                            datasets: [{
                                label: "收入",
                                backgroundColor: "rgba(2,117,216,0.5)",
                                borderColor: "rgba(2,117,216,1)",
                                data: [0],
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        min: 0,
                                        callback: function(value) {
                                            return '￥' + value;
                                        }
                                    }
                                }]
                            }
                        }
                    });
                }
            });
            
            // 初始化收入趋势图表
            var revenueTrendCtx = document.getElementById("revenueTrendChart");
            var revenueTrendChart = new Chart(revenueTrendCtx, {
                type: 'line',
                data: {
                    labels: ["最近7天", "最近6天", "最近5天", "最近4天", "最近3天", "最近2天", "今天"],
                    datasets: [{
                        label: "收入",
                        lineTension: 0.3,
                        backgroundColor: "rgba(2,117,216,0.2)",
                        borderColor: "rgba(2,117,216,1)",
                        pointRadius: 5,
                        pointBackgroundColor: "rgba(2,117,216,1)",
                        pointBorderColor: "rgba(255,255,255,0.8)",
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: "rgba(2,117,216,1)",
                        pointHitRadius: 50,
                        pointBorderWidth: 2,
                        data: [10000, 30162, 26263, 18394, 18287, 28682, 31274],
                    }],
                },
                options: {
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                maxTicksLimit: 7
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                min: 0,
                                maxTicksLimit: 5,
                                callback: function(value) {
                                    return '￥' + value;
                                }
                            },
                            gridLines: {
                                color: "rgba(0, 0, 0, .125)",
                            }
                        }],
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                return '收入: ￥' + tooltipItem.yLabel;
                            }
                        }
                    }
                }
            });
            
            // 按日期范围查询收入
            $('#searchRevenue').click(function() {
                var startDate = $('#startDate').val();
                var endDate = $('#endDate').val();
                
                if (startDate && endDate) {
                    // 确保日期格式正确
                    if (!isValidDate(startDate) || !isValidDate(endDate)) {
                        alert('请输入有效的日期格式 (YYYY-MM-DD)');
                        return;
                    }
                    
                    $.ajax({
                        url: '/flightbooking/statistics/revenue-by-date',
                        method: 'GET',
                        data: {
                            startDate: startDate,
                            endDate: endDate
                        },
                        success: function(data) {
                            if (data.error) {
                                console.error(data.error);
                                $('#periodRevenue').text('￥0');
                            } else {
                                $('#periodRevenue').text('￥' + (data.revenue || 0));
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('请求错误:', error);
                            $('#periodRevenue').text('￥0');
                        }
                    });
                } else {
                    alert('请选择开始和结束日期');
                }
            });
            
            // 验证日期格式 YYYY-MM-DD
            function isValidDate(dateStr) {
                var regex = /^\d{4}-\d{2}-\d{2}$/;
                if (!regex.test(dateStr)) {
                    return false;
                }
                
                // 检查日期是否有效
                var parts = dateStr.split("-");
                var year = parseInt(parts[0], 10);
                var month = parseInt(parts[1], 10) - 1;
                var day = parseInt(parts[2], 10);
                
                var date = new Date(year, month, day);
                return date.getFullYear() === year && 
                       date.getMonth() === month && 
                       date.getDate() === day;
            }
            
            // 刷新数据
            $('#refreshData').click(function() {
                location.reload();
            });
            
            // 导出报表
            $('#exportCsv').click(function() {
                window.location.href = '/flightbooking/statistics/export-report?format=csv';
            });
        });
    </script>
</body>
</html>